

<template>
  <!-- 导航部分 -->
  <el-row class="row">
    <el-col :span="24">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品规格管理</el-breadcrumb-item>
        <el-breadcrumb-item>[{{spe.speName}}]规格项管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
  </el-row>

  <!-- 工具栏 -->
  <el-row class="row">
    <el-col :span="24">
      <el-button-group class="ml-4">
        <el-button type="primary" @click="toAdd"><el-icon><Plus /></el-icon></el-button>
        <el-button type="primary" ><el-icon><EditPen /></el-icon></el-button>
        <el-button type="primary" ><el-icon><Minus /></el-icon></el-button>
      </el-button-group>
    </el-col>
  </el-row>

  <!-- 列表 -->
  <el-row class="row">
    <el-col :span="24">
      <el-table :data="speItems" stripe  border style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="speItemText" label="文本" />
        <el-table-column prop="speItemImg" label="图片" >
          <template #default="scope">
            <el-image :src="scope.row.speItemImg" height="50"/>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"  />
        <el-table-column prop="status" label="状态"  >
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240" >
          <template #default="scope">
            <el-button size="small" type="info">编辑</el-button>
            <el-button size="small" type="error">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>


  <!-- 新增规格项的弹窗 -->
  <el-dialog
      v-model="addSpeItemDialogVisible"
      title="新增规格项"
      width="500"
      :before-close="handleClose"
  >
    <el-form  label-width="auto">
      <el-form-item label="规格项文本">
        <el-input v-model="speItemText"></el-input>
      </el-form-item>
      <el-form-item label="规格图片">
        <el-upload
            class="avatar-uploader"
            :action="uploadImageUrl"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            name="uploadFile"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addSpeDialogVisible.value = false">取消</el-button>
        <el-button type="primary" @click="doAddSpeItemSubmit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {useRouter} from 'vue-router'
import speItemRequest from '../../api/spe-item.js';
import speReqeuest from '../../api/spe.js';
import {ref, onMounted, reactive} from 'vue';
import {ElMessage} from 'element-plus'
let router = useRouter();

// 属性定义
let spe = ref({}); // 对应的规格对象
let speItems = ref([]);// 所有的规格项列表
// 新增规格项的相关属性
let  addSpeItemDialogVisible = ref(false);
let speItemText = ref('');// 新增的规格项对象

let uploadImageUrl = ref("http://localhost:8080/upload");
const imageUrl = ref('')

// 函数定义

function handleAvatarSuccess(res){
  console.log(res);
  imageUrl.value = res.msg;
}

/**
 * 新增规格项提交事件
 */
function doAddSpeItemSubmit(){
  let speItem = {
    speItemText:speItemText.value,
    speItemImg:imageUrl.value,
    speId:spe.value.speId
  }
  speItemRequest.save(speItem,res=>{
    if(res.code == 200){
      ElMessage({
        type:"success",
        message:"新增规格项成功"
      });
      imageUrl.value = '';
      speItemText.value = ''
      addSpeItemDialogVisible.value = false;
      // 刷新列表
      loadSpeItems();
    }else{
      ElMessage({
        type:"error",
        message:"新增规格项失败"
      });
    }
  })
}
/**
 * 工具栏添加按钮事件
 */
function toAdd(){
  addSpeItemDialogVisible.value = true;
}

/**
 * 加载规格项列表
 */
function loadSpeItems(){
  // 从路由中获取参数
  let speId = router.currentRoute.value.params.speId;
  // 加载规格
  speReqeuest.get(speId,res=>{
    spe.value = res.data;
  });
  // 加载规格项列表
  speItemRequest.queryList(speId,res=>{
    speItems.value=res.data;
  });
}
onMounted(()=>{
  loadSpeItems();
})
</script>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<style>
 .avatar-uploader .el-upload {
   border: 1px dashed var(--el-border-color);
   border-radius: 6px;
   cursor: pointer;
   position: relative;
   overflow: hidden;
   transition: var(--el-transition-duration-fast);
 }

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>